<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品优购-首页</title>
    <link rel="stylesheet" href="css/normalize.css">
    <!--字体图标-->
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

</head>
<body>
<!--从顶部开始-->
<div class='wrap top'>
    <div class="content">
        <div class="tl fl">
            <span>品优购欢迎您！请</span>
            <a href="login.html">登录</a>
            <a href="register.html">免费注册</a>
        </div>
        <div class="tr fr">
            <ul>
                <li>
                    <a href="#">我的订单</a>
                    <span>|</span>
                </li>
                <li><a href="#">我的品优购</a>
                    <i class="iconfont icon-xiajiantou"></i>
                    <span>|</span>
                </li>
                <li><a href="#">品优购会员</a>
                    <span>|</span>
                </li>
                <li><a href="#">企业采购</a>
                    <span>|</span>
                </li>
                <li><a href="#">关注品优购</a>
                    <i class="iconfont icon-xiajiantou"></i>
                    <span>|</span>
                </li>
                <li><a href="#">客户服务</a>
                    <i class="iconfont icon-xiajiantou"></i>
                    <span>|</span>
                </li>
                <li><a href="#">网站导航</a>
                    <i class="iconfont icon-xiajiantou"></i>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--顶部结束-->
<!--logo区域开始-->
<div class="wrap">
    <div class="content logo-search clearfix">
        <div class="logo fl">
            <a href="品优购.html"><img src="images/logo.png"></a>
        </div>
        <div class="form fl">
            <form>
                <input type="text" placeholder="语言开发">
                <input type="submit" value="搜索">
            </form>
            <ul>
                <li><a href="#">优惠购首发</a></li>
                <li><a href="#">亿元优惠</a></li>
                <li><a href="#">9.9元团购</a></li>
                <li><a href="#">满99减30</a></li>
                <li><a href="#">办公用品</a></li>
                <li><a href="#">电脑</a></li>
                <li><a href="#">通信</a></li>
            </ul>
        </div>
        <a href="cart.html" class="cart fr">
            <i class="iconfont icon-gouwuche2"></i>
            <span>我的购物车</span>
            <em class="iconfont icon-youjiantou"></em>
            <b>9</b>
        </a>
    </div>
</div>
<!--logo区域结束-->
<!--导航开始-->
<div class="wrap nav">
    <div class="content clearfix">
        <div class="category fl">
            全部商品分类
        </div>
        <ul class="fl">
            <li><a href="#">服装城</a></li>
            <li><a href="#">美妆馆</a></li>
            <li><a href="#">传智超市</a></li>
            <li><a href="#">全球购</a></li>
            <li><a href="#">闪购</a></li>
            <li><a href="#">团购</a></li>
            <li><a href="#">拍卖</a></li>
            <li><a href="#">有趣</a></li>
        </ul>
    </div>
</div>
<!--导航结束-->
<!-- 广告区域开始 -->
<!-- 大容器 -->
<div class="wrap clearfix">
    <!-- 版心 -->
    <div class="content banner">
        <!-- 广告区域的左边 -->
        <div class="banner-left fl">
            <ul>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
                <li><a href="#">家用电器<i class="iconfont icon-youjiantou"></i></a></li>
            </ul>
        </div>
        <!-- 广告区域的中间 -->
        <div class="banner-center fl">
            <ul>
                <li><a href="#"><img src="images/banner1.jpg"></a></li>  	<li><a href="#"><img src="images/banner2.jpg"></a></li>  	<li><a href="#"><img src="images/banner3.jpg"></a></li>
            </ul>
        </div>
        <!-- 广告区域的右边 -->
        <div class="banner-right fr">
            <!-- 右边最上面的标题 -->
            <div class="br-title">
                <h4>品优购快报</h4>
                <a href="#">更多<i class="iconfont icon-youjiantou"></i></a>
            </div>
            <!--- 右边的快报列表 -->
            <div class="br-newslist">
                <ul>
                    <li><a href="#"><b>[特惠]</b>备战开学季&nbsp;全民半价购数码</a></li>
                    <li><a href="#"><b>[特惠]</b>备战开学季&nbsp;全民半价购数码</a></li>
                    <li><a href="#"><b>[特惠]</b>备战开学季&nbsp;全民半价购数码</a></li>
                    <li><a href="#"><b>[特惠]</b>备战开学季&nbsp;全民半价购数码</a></li>
                    <li><a href="#"><b>[特惠]</b>备战开学季&nbsp;全民半价购数码</a></li>
                </ul>
            </div>
            <!--右边的便民服务-->
            <div class="server">
                <ul>
                    <li><a href="#">话费</a></li>
                    <li><a href="#">话费<img src="images/jian.jpg"></a></li>
                    <li><a href="#">话费</a></li>
                    <li><a href="#">话费</a></li>
                    <li><a href="#">话费</a></li>
                    <li><a href="#">话费</a></li>
                    <li><a href="#">话费</a></li>
                    <li><a href="#">话费</a></li>
                    <li><a href="#">话费</a></li>
                    <li><a href="#">话费</a></li>
                    <li><a href="#">话费</a></li>
                    <li><a href="#">话费</a></li>
                </ul>
            </div>
            <!-- 代言人的图 -->
            <img src="images/ad.jpg">
        </div>
    </div>
</div>
<!-- 广告区域结束 -->

<!-- 今日推荐开始 -->
<div class="wrap">
    <div class="content recommend">
        <div class="recommend-left fl">
            今日推荐
        </div>
        <div class="recommend-right fl">
            <ul>
                <li><a href="#"><img src="images/today01.png"></a></li>
                <li><a href="#"><img src="images/today02.png"></a></li>
                <li><a href="#"><img src="images/today03.png"></a></li>
                <li><a href="#"><img src="images/today04.png"></a></li>
            </ul>
        </div>
    </div>
</div>
<!-- 今日推荐结束 -->

<!--固定定位左边导航开始-->
<div class="wrap">
    <div class="content fixed">
        <div class="floor">
            <ul>
                <li class="current"><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
            </ul>
        </div>
    </div>
</div>



<!--固定定位左边导航结束-->


<!--猜你喜欢开始-->
<div class="wrap">
    <div class="content like">
        <div class="title clearfix">
            <h5>猜你喜欢</h5>
            <a href="#">换一批<i class="iconfont icon-z"></i></a>
        </div>
        <div class="prolist">
            <ul class="clearfix">
                <li><a href="#">
                    <img src="images/like_01.png">
                    <p>阳光美包新款单肩包女
                        包时尚子母包四件套女<b>￥116.00</b></p>

                </a></li>
                <li><a href="#">
                    <img src="images/like_02.png">
                    <p>阳光美包新款单肩包女
                        包时尚子母包四件套女<b>￥116.00</b></p>

                </a></li>
                <li><a href="#">
                    <img src="images/like_03.png">
                    <p>阳光美包新款单肩包女
                        包时尚子母包四件套女<b>￥116.00</b></p>

                </a></li>
                <li><a href="#">
                    <img src="images/like_04.png">
                    <p>阳光美包新款单肩包女
                        包时尚子母包四件套女<b>￥116.00</b></p>

                </a></li>
                <li><a href="#">
                    <img src="images/like_05.png">
                    <p>阳光美包新款单肩包女
                        包时尚子母包四件套女<b>￥116.00</b></p>

                </a></li>
                <li><a href="#">
                    <img src="images/like_06.png">
                    <p>阳光美包新款单肩包女
                        包时尚子母包四件套女
                        <b>￥116.00</b>
                    </p>
                </a></li>
            </ul>
        </div>
    </div>
</div>
<!--猜你喜欢结束-->
</body>
</html>